<template>
  <div class="express">
    <group>
      <x-input v-model="form.fromPlace" title="取货地址" placeholder="请输入取货地址"></x-input>
      <x-input v-model="form.toPlace" title="送货地址" placeholder="请输入送货地址"></x-input>
      <datetime class="selec-time" :min-year="1970" placeholder="请选择" v-model="form.startTime" format="YYYY-MM-DD HH:mm" @on-change="change" title="开始时间"></datetime>
      <datetime class="selec-time" :min-year="1970" placeholder="请选择" v-model="form.endTime" format="YYYY-MM-DD HH:mm" @on-change="change" title="取货时间"></datetime>
      <x-input ref="phoneValid" autocomplete="off" title="联系方式" v-model="form.tel" name="mobile" placeholder="请输入联系方式" keyboard="number" is-type="china-mobile"></x-input>
      <cell id="myCell" placeholder="请输入物品描述" title="物品描述" @click.native="showSize=true" is-link>{{typeVal}}</cell>
      <x-textarea title="备注" :max="800" v-model="form.note" placeholder="请备注取件注意事项(如易碎...)等信息" ></x-textarea>
      <uploadImage :imglist.sync="form.images1"></uploadImage>
      <!-- <uploader
        :max="10"
        :images="form.images1"
        :handleClick="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <x-switch title="取件证明" v-model="form.isValid"></x-switch>
      <!-- <uploader
        :max="10"
        v-show="form.isValid"
        :images="form.images2"
        :handle-click="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage v-show="form.isValid" :imglist.sync="form.images2"></uploadImage>
      <popup-radio title="选择性别" :options="options1" v-model="form.gender"></popup-radio>
      <x-input placeholder="请输入价格" type="number" title="服务价格" v-model="form.price">
        <span @click="showFee=true" class="fee-scale" slot="right">收费标准</span>
      </x-input>
    </group>
    <x-button @click.native="isValid" class="submit" type="primary">提交订单</x-button>
    <actionsheet id="sizeBox" @on-after-hide="handleHide" v-model="showSize" show-cancel>
      <cell slot="header" :title="`${item.name}${item.desc}`" class="vux-1px-b demo3-slot" v-for="(item,i) in sizeList" :key="i">
        <inline-x-number v-model="item.num" style="display:block;" :min="0" width="50px" button-style="round"></inline-x-number>
      </cell>
    </actionsheet>
    <confirm
      v-model="showFee"
      :show-cancel-button="false"
      title="收费标准"
      @on-confirm="showFee=false">
      <cell-form-preview :list="priceList"></cell-form-preview>
    </confirm>
    <transition name="bounce">
      <div class="img-enlarge" v-show="imgEnLarge" @click="handleImgEnlarge">
        <img class="img" v-lazy="imgUrl" alt="">
      </div>
    </transition>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import { getUnixTime } from '../../js/utils'
import { upload } from '../../api/'
import {
  Confirm,
  Cell,
  CellFormPreview,
  Actionsheet,
  InlineXNumber,
  XSwitch,
  Datetime,
  PopupRadio,
  Group,
  XButton,
  XInput,
  XTextarea
} from 'vux';

const IndexStore = namespace('publish');

@Component({
  components: {
    uploadImage,
    Confirm,
    PopupRadio,
    Cell,
    CellFormPreview,
    Actionsheet,
    InlineXNumber,
    XSwitch,
    Datetime,
    Group,
    XButton,
    XInput,
    XTextarea
  }
})
export default class ExpressIndex extends Vue {
  @IndexStore.Action getCreatePaotui;
  imgEnLarge = false
  typeVal = ''
  form = {
    fromPlace: '',
    toPlace: '',
    startTime: '',
    endTime: '',
    gender: '不限',
    images1: [],
    images2: [],
    price: '',
    isValid: false,
    type: 0
  }
  validTime = false
  showSize = false
  uploadUrl = upload
  options1 = ['男', '女', '不限']
  showFee = false
  priceList = [{
    label: '小件',
    value: '2~3元/件'
  }, {
    label: '中件',
    value: '4～6元/件'
  }, {
    label: '大件',
    value: '7～10元/件'
  }, {
    label: '超大件',
    value: '10元以上/件'
  }]
  imgUrl = ''
  sizeList = [
    { name: '小件', desc: '(如:1～2件夏装)', num: 0 },
    { name: '中件', desc: '(如:双运动鞋)', num: 0 },
    { name: '大件', desc: '(如:1箱牛奶)', num: 0 },
    { name: '超大件', desc: '(如:1个鞋架)', num: 0 }
  ]
  handleHide () {
    let flag = false
    let str = ''
    let arr = this.sizeList
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].num > 0) {
        flag = true
        str += arr[i].name + ' x ' + arr[i].num + '件；'
      }
    }
    if (flag) {
      this.typeVal = str
    } else {
      this.typeVal = ''
      this.$vux.toast.text('请设置物品描述', 'middle');
    }
  }
  change (value) {
  }
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  isValid () {
    let flag = true
    this.validTime = false
    const { fromPlace, toPlace, startTime, endTime, tel, note, gender, price, isValid, images2 } = this.form
    const phoneValid = this.$refs.phoneValid.valid
    if (!price) {
      flag = false
      this.$vux.toast.text('请输入服务价格', 'middle');
    }
    if (!gender) {
      flag = false
      this.$vux.toast.text('请选择性别', 'middle');
    }
    if (isValid && images2.length === 0) {
      flag = false
      this.$vux.toast.text('请上传取件证明', 'middle');
    }
    // if (images1.length === 0) {
    //   flag = false
    //   this.$vux.toast.text('请上传物品图片', 'middle');
    // }
    if (!note) {
      flag = false
      this.$vux.toast.text('请输入备注信息', 'middle');
    }
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!tel) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (!this.typeVal) {
      flag = false
      this.$vux.toast.text('请设置物品描述', 'middle')
    }
    if (!endTime) {
      flag = false
      this.$vux.toast.text('请输入取货时间', 'middle');
    }
    if (!startTime) {
      flag = false
      this.$vux.toast.text('请输入开始时间', 'middle');
    }
    if (!toPlace) {
      flag = false
      this.$vux.toast.text('请选择送货地址', 'middle');
    }
    if (!fromPlace) {
      flag = false
      this.$vux.toast.text('请选择取货地址', 'middle');
    }
    if (flag) {
      this.confirmShowNumTips()
    }
  }
  confirmShowNumTips () {
    const startTime = new Date(this.form.startTime).getTime()
    const endTime = new Date(this.form.endTime).getTime()
    if (endTime - startTime < 30 * 60 * 1000 && this.validTime === false) {
      const _this = this;
      this.$vux.confirm.show({
        title: '提示',
        content: '时间间隔少于30分钟，您确定要吗？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm () {
          _this.validTime = true;
          _this.confirmShowNumTips()
        }
      })
      return;
    } else {
      this.validTime = true
    }
    this.doPublish()
  }
  doPublish () {
    const { fromPlace, toPlace, startTime, endTime, tel, note, gender, price, type, images1, images2 } = this.form
    let desc = this.sizeList.filter(s => s.num !== 0).map(s => `${s.name}${s.desc}${s.num}件`).join('；')
    const params = {
      fromPlace: fromPlace,
      toPlace: toPlace,
      startTime: getUnixTime(startTime),
      endTime: getUnixTime(endTime),
      tel: tel,
      desc: desc,
      note: note,
      gender: gender,
      price: price,
      type: type,
      imgs: images1,
      idImgs: images2
    }
    this.getCreatePaotui(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('发布成功', 'middle');
        // window.location.reload();
        this.$router.push({path: '/errand/square', query: { type: 0 }})
      }
    })
  }
}
</script>
<style lang="less">
  .express {
    #myCell {
      .weui-cell__ft {
        height: 24px;
        line-height: 24px;
        width: 72%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
      }
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    .weui-cell_access .weui-cell__ft {
      text-align: left!important;
      margin-left: 1em;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .fee-scale {
      // font-size: 12px;
      color: red;
    }
    #sizeBox .vux-cell-bd p {
      text-align: left;
    }
    .submit {
      position: fixed;
      left: 0;
      bottom: 0;
      margin: 0 auto;
    }
  }
</style>
